<template>
  <basic-card
    :title="$t('menu.monitor_list')"
    :iconClass="'iconfont icon-shexiangtou'">

    <basic-table
      ref="BasicTable"
      :pageMethod="$mainApi.monitorApi.getByPage"
      :tableForm="tableForm">
      <template #table-top="basicTable">
        <el-form :model="tableForm" :inline="true" size="small" class="text-right">
          <el-form-item prop="search">
            <el-input
              v-model="tableForm.search"
              @change="basicTable.table.refresh"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="basicTable.table.refresh">
              {{$t("botton.search")}}
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="pushMonitor" style="padding: 9px;"><i class="el-icon-plus"></i></el-button>
          </el-form-item>
          <el-form-item>
            <little-delete :disabled="basicTable.table.selectRows < 1" :message="$t('message.delete_rows_ask')" :delete-method="() => deleteMonitor(basicTable.table.selectRows)" @delete="basicTable.table.refresh" />
          </el-form-item>
          <el-form-item>
            <el-button @click="initTableForm" style="padding: 9px;"><i class="el-icon-refresh-left"></i></el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #table-column="basicTable">
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column prop="name" :label="$t('monitor.device_name')">
          <template #header>
            {{ $t('monitor.device_name') }}
            <edit-text
              :value="tableForm.name"
              @change="(value) => { tableForm.name = value; }"
              :icon-class="'el-icon-search'"
              :tag="tableForm.name"
              :icon-visible="true"
            />
          </template>
          <template #default="scope">
            <edit-text
              :value="scope.row.name"
              :required="{ bol: true, message: $t('monitor.device_name_required_massage') }"
              :edit-method="(value) => changeMonitor(scope.row, 'name', value)"
              :icon-visible="!scope.row.name"
            />
          </template>
        </el-table-column>
        <el-table-column prop="deviceType" :label="$t('monitor.monitor_type')">
          <template slot-scope="scope">
            <span v-if="scope.row.deviceType === 0">监控</span>
            <span v-else-if="scope.row.deviceType === 1">录像机</span>
            <span v-else>其他</span>
          </template>
        </el-table-column>

        <el-table-column prop="deviceCode" :label="$t('monitor.broadcast_coding')">
          <template #header>
            {{ $t('monitor.broadcast_coding') }}
            <edit-text
              :value="tableForm.deviceCode"
              @change="(value) => { tableForm.deviceCode = value; }"
              :icon-class="'el-icon-search'"
              :tag="tableForm.deviceCode"
              :icon-visible="true"
            />
          </template>
          <template #default="scope">
            <edit-text
              :value="scope.row.deviceCode"
              :required="{ bol: true, message: $t('monitor.broadcast_coding_required_message') }"
              :edit-method="(value) => changeMonitor(scope.row, 'deviceCode', value)"
              :icon-visible="!scope.row.deviceCode"
            />
          </template>
        </el-table-column>

        <el-table-column prop="deviceModel.name" :label="$t('monitor.devices_model')">
          <template #header>
            {{ $t('monitor.devices_model') }}
            <edit-select
              :value="tableForm.deviceModelId"
              :options="deviceModelList"
              :prop="{ value: 'id', label: 'name' }"
              @change="(value) => { tableForm.deviceModelId = value; }"
              :icon-class="'el-icon-search'"
              :tag="tableForm.deviceModelId"
              :icon-visible="true"
              :clearable="true"
            />
          </template>
          <template #default="scope">
            <edit-select
              :value="scope.row.deviceModel ? scope.row.deviceModel.id : ''"
              :options="deviceModelList"
              :prop="{ value: 'id', label: 'name' }"
              :edit-method="(value) => changeMonitor(scope.row, 'deviceModelId', value)"
              :icon-visible="!scope.row.deviceModelId"
            />
          </template>
        </el-table-column>

        <el-table-column prop="brand.name" :label="$t('monitor.devices_brands')">
          <template #header>
            {{ $t('monitor.devices_brands') }}
            <edit-select
              :value="tableForm.brandId"
              :options="deviceBrandList"
              :prop="{ value: 'id', label: 'name' }"
              @change="(value) => { tableForm.brandId = value; }"
              :icon-class="'el-icon-search'"
              :tag="tableForm.brandId"
              :icon-visible="true"
              :clearable="true"
            />
          </template>
          <template #default="scope">
            <edit-select
              :value="scope.row.brand ? scope.row.brand.id : ''"
              :options="deviceBrandList"
              :prop="{ value: 'id', label: 'name' }"
              :edit-method="(value) => changeMonitor(scope.row, 'brandId', value)"
              :icon-visible="!scope.row.brandId"
            />
          </template>
        </el-table-column>

        <el-table-column prop="accounts" :label="$t('monitor.monitor_account')">
          <template #header>
            {{ $t('monitor.monitor_account') }}
            <edit-text
              :value="tableForm.accounts"
              @change="(value) => { tableForm.accounts = value; }"
              :icon-class="'el-icon-search'"
              :tag="tableForm.accounts"
              :icon-visible="true"
            />
          </template>
          <template #default="scope">
            <edit-text
              :value="scope.row.accounts"
              :edit-method="(value) => changeMonitor(scope.row, 'accounts', value)"
              :icon-visible="!scope.row.accounts"
            />
          </template>
        </el-table-column>

        <el-table-column prop="password" :label="$t('monitor.monitor_password')">
          <template #header>
            {{ $t('monitor.monitor_password') }}
            <edit-text
              :value="tableForm.password"
              @change="(value) => { tableForm.password = value; }"
              :icon-class="'el-icon-search'"
              :tag="tableForm.password"
              :icon-visible="true"
            />
          </template>
          <template #default="scope">
            <edit-text
              :value="scope.row.password"
              :edit-method="(value) => changeMonitor(scope.row, 'password', value)"
              :icon-visible="!scope.row.password"
            />
          </template>
        </el-table-column>

        <el-table-column prop="ip" :label="$t('monitor.monitor_ip')">
          <template #header>
            {{ $t('monitor.monitor_ip') }}
            <edit-text
              :value="tableForm.ip"
              @change="(value) => { tableForm.ip = value; }"
              :icon-class="'el-icon-search'"
              :tag="tableForm.ip"
              :icon-visible="true"
            />
          </template>
          <template #default="scope">
            <edit-text
              :value="scope.row.ip"
              :edit-method="(value) => changeMonitor(scope.row, 'ip', value)"
              :icon-visible="!scope.row.ip"
            />
          </template>
        </el-table-column>

        <el-table-column prop="channel" :label="$t('monitor.monitor_channel')">
          <template #header>
            {{ $t('monitor.monitor_channel') }}
            <edit-text
              :value="tableForm.channel"
              @change="(value) => { tableForm.channel = value; }"
              :icon-class="'el-icon-search'"
              :tag="tableForm.channel"
              :icon-visible="true"
            />
          </template>
          <template #default="scope">
            <edit-text
              :value="scope.row.channel"
              :required="{ bol: true, message: $t('monitor.channel_required_message') }"
              :edit-method="(value) => changeMonitor(scope.row, 'channel', value)"
              :icon-visible="!scope.row.channel"
            />
          </template>
        </el-table-column>

        <el-table-column prop="status" :label="$t('monitor.monitor_online')">
          <template #header>
            {{ $t('monitor.monitor_online') }}
            <edit-select
              :value="tableForm.status"
              :options="[{
                id: $config.MONITOR_DEVICE_STATUS.online,
                name: $t('common.online')
              }, {
                id: $config.MONITOR_DEVICE_STATUS.offline,
                name: $t('common.offline')
              }]"
              :prop="{ value: 'id', label: 'name' }"
              @change="(value) => { tableForm.status = value; }"
              :icon-class="'el-icon-search'"
              :tag="tableForm.status"
              :icon-visible="true"
              :clearable="true"
            />
          </template>
          <template #default="scope">
            <el-tag
              :type= "scope.row.status == '1' ? 'success' : 'warning'"
              effect="dark">
              {{ scope.row.status == '1' ? $t('common.online') : $t('common.offline') }}
            </el-tag>

<!--            <el-switch-->
<!--              :active-value="$config.MONITOR_DEVICE_STATUS.online"-->
<!--              :inactive-value="$config.MONITOR_DEVICE_STATUS.offline"-->
<!--              v-model="scope.row.status"-->
<!--              :edit-method="(value) => changeMonitor(scope.row, 'status', value)"-->
<!--            >-->
<!--            </el-switch>-->

          </template>
        </el-table-column>

        <el-table-column :label="$t('common.action')" align="center" width="80">
          <template #default="scope">
            <edit-delete :message="$t('message.delete_ask')" :edit-method="() => deleteMonitor([scope.row])" @delete="basicTable.table.refresh" />
          </template>
        </el-table-column>
      </template>

      <template #others-elements="basicTable">
        <monitor-form-dialop ref="MonitorFormDialop" @submit="basicTable.table.refresh" />
      </template>
    </basic-table>
  </basic-card>
</template>
<script lang="ts">
import Vue from 'vue';
import lodash from "lodash";
import BasicCard from "@/components/Basic/Card/BasicCard.vue";
import BasicTable from "@/components/Basic/Table/BasicTable.vue";
import LittleDelete from "@/components/Basic/Table/littleDelete.vue";
import EditText from "@/components/Edits/text.vue";
import EditSelect from "@/components/Edits/select.vue";
import EditDelete from "@/components/Edits/delete.vue";
import BasicDeleteDialop from "@/components/Basic/Dialop/BasicDeleteDialop.vue";
import MonitorFormDialop from "./components/monitorFormDialop.vue";
import { IMonitor } from '@/service/main/apis/MonitorApi';
export default Vue.extend({
  components: { BasicCard, BasicTable, LittleDelete, EditText, EditSelect, EditDelete, BasicDeleteDialop, MonitorFormDialop },
  data() {
    return {
      tableForm: {
        search: "",
        name: "",
        deviceCode: "",
        deviceType: "",
        deviceModelId: "",
        brandId: "",
        accounts: "",
        password: "",
        ip: "",
        channel: "",
        status: ""
      },
      deviceModelList: [],
      deviceBrandList: []
    }
  },
  async mounted() {
    await this.initDeviceModelList();
    await this.initBrandSelectData();
  },
  methods: {
    async initDeviceModelList() {
      const result = await this.$mainApi.devicesModelApi.getDevicesModelByPage({
        page: 1,
        page_size: 9999
      });
      this.deviceModelList = (result as any).data.list;
    },
    async initBrandSelectData() {
      const result = await this.$mainApi.brandsApi.getBrandsByPage({
        page: 1,
        page_size: 9999
      });
      (this.deviceBrandList as any) = (result as any).data.list;
    },
    changeMonitor(row: any, putKey: string, putValue: any) {
      const data = lodash.cloneDeep(row);
      delete data.id;
      delete data.brand;
      delete data.deviceModel;
      data[putKey] = putValue;
      // return this.$mainApi.monitorApi.putMonitor(row.id, data).finally(() => {
      //   // (this.$refs.BasicTable as any).refresh();
      // });
    },
    deleteMonitor(rows: any) {
      const allPromise: Array<Promise<any>> = [];
      rows.forEach((row: any) => {
        // allPromise.push(this.$mainApi.monitorApi.deleteMonitor(row.id));
      });
      return Promise.allSettled(allPromise);
    },
    pushMonitor() {
      (this.$refs as any).MonitorFormDialop.init();
    },
    initTableForm() {
      this.tableForm = {
        search: "",
        name: "",
        deviceCode: "",
        deviceType: "",
        deviceModelId: "",
        brandId: "",
        accounts: "",
        password: "",
        ip: "",
        channel: "",
        status: ""
      };
    }
  }
})
</script>
<style lang="scss" scoped>

</style>
